<template>
  <div>
    <va-card :title="'入住信息列表'" class="mb-4">
      <va-data-table
        :fields="fields"
        :data="checkinRecords"
        :per-page="10"
      >
        <template slot="marker" slot-scope="props">
          <va-icon name="fa fa-circle" :color="props.rowData.color" size="8px" />
        </template>

        <template slot="actions" slot-scope="props">
          <va-button flat small color="info" @click="info(props.rowData)" class="ma-0">
            详情
          </va-button>
          <va-button flat small color="gray" @click="edit(props.rowData)" class="ma-0">
            编辑
          </va-button>
        </template>
      </va-data-table>
    </va-card>
    <va-modal
      v-model="showInfo"
      :title=" '详细信息' "
      :okText=" '确定' "
      :cancelText=" '返回' "
      :message=" infotext "
      :hideDefaultActions="true"
    />
  </div>

</template>

<script>

export default {
  data () {
    return {
      showInfo: false,
      infotext: '',
      page: 1,
      checkinRecords: [],
    }
  },
  created () {
    var _this = this
    function getdata () {
      var fd = new URLSearchParams()
      fd.append('currentPage', _this.page)
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/checkin/list', fd)
        .then(function (response) {
          console.log(response)
          if (response.data.code == 80200) {
            console.log(response.data.data.records)
            _this.checkinRecords = _this.checkinRecords.concat(response.data.data.records)

            if (response.data.data.pages > _this.page) {
              _this.page++
              getdata()
            }
          }
        },
        function (err) {
          console.log(err)
        },
        )
    }
    getdata()

    console.log('post')
  },
  computed: {
    fields () {
      return [{
        name: '__slot:marker',
        width: '30px',
        dataClass: 'text-center',
      }, {
        name: 'userRealname',
        title: '入住人姓名',
      },
      {
        name: 'cityName',
        title: '城市名称',
      },
      {
        name: 'hotelName',
        title: '酒店名称',
      },
      {
        name: 'roomNum',
        title: '入住房间号',
      },
      {
        name: 'inTime',
        title: '入住时间',
      }, {
        name: 'peoples',
        title: '入住人数',
      }, {
        name: '__slot:actions',
        dataClass: 'text-right',
      }]
    },
  },

  methods: {
    info (checkData) {
      this.infotext = '入住编号 : ' + checkData.id +'入住时间 : ' + checkData.inTime + '<br/>操作人id : ' + checkData.operatorId + '<br/>入住人数 : ' + checkData.peoples + '<br/>备注 : ' + checkData.remark + '<br/>房间号 : ' + checkData.roomNum + '<br/>入住人身份证 : ' + checkData.userIdcard + '<br/>入住人姓名 : ' + checkData.userRealname
      this.showInfo = true
    },
    edit (checkData) {
      this.$router.push({ name: 'checkin-mod', params: checkData })
    },
  },
}
</script>

<style lang="scss">
</style>
